<template>
    <NavBar></NavBar>
    <ContentField>
     <h2 style="text-align:center;margin-bottom: 20px;">发布题集</h2>

     <form @submit.prevent="publishSet">
        <div class="mb-3">
            <label for="classId" class="form-label">&nbsp;&nbsp;发布班级id(classId): </label>
            <span type="text" class="form-control" id="classId">{{ classId }}</span>
        </div>
        <div class="mb-3">
            <label for="tId" class="form-label">&nbsp;&nbsp;发布题集id(setId): </label>
            <!-- <span type="text" class="form-control" id="tId">{{ tId }}</span> -->
            <div class="form-group"><label >&nbsp;&nbsp;</label>
                <div class="form-check form-check-inline" v-for="(unp,index) in unps" :key="index">
                    <input class="form-check-input" type="radio" name="sId" v-model="sId" :value='unp'>    <!-- 这里的 :value 很关键很关键, 不然无法识别到unp的值！！！ -->
                    <label class="form-check-label">{{ unp }}&nbsp;&nbsp;</label>
                </div>
            </div>
        </div>

        <span style="color:red; text-align:center; display:block;">{{ error_message }}</span>
        <div align="center">
            <button type="submit" class="btn btn-primary" style="width:20%;">发布</button>
        </div>
    </form>
    </ContentField>
 </template>
 

 <script>
 
 import NavBar from "@/components/teacher/NavBar.vue";
 import ContentField from '@/components/commons/ContentField.vue';
 import {useStore} from 'vuex';
 import {useRoute} from 'vue-router';
 import {ref} from 'vue';
 import router from '@/router/index';
 import $ from 'jquery';

 export default{
     name: 'publishSet',
     components: {
         NavBar,
         ContentField,
     },
     setup(){ 

        const store = useStore();
        const route = useRoute();
        const classId = route.params.classId;
        const teacherId = store.state.user.id;

        let unps = ref([]);  //未发布的题集
        let sId = ref('');  //教师选择将要发布的题集的题集号
        let error_message = ref('');

        const getUnpublishSetId = (teacherId, classId) => {
                // console.log("teacherId: ");
                // console.log(teacherId);
                // console.log("classId: ");
                // console.log(classId);

                $.ajax({
                    url: 'http://localhost:8090/sls/publish/getUnpublished' ,
                    type: 'get',
                    data: {
                        teacherId: teacherId,
                        classId: classId,
                    },
                    headers: {
                        Authorization: "Bearer " +store.state.user.token,
                    },
                    success(resp){
                        unps.value = resp;
                        // console.log("unps.value: ");
                        // console.log(unps.value);
                        // console.log("unps.value[0]: ");
                        // console.log(unps.value[0]);
                        // console.log(resp);
                        // console.log(resp[0]);
                    },
                    error(resp){
                        console.log(resp);
                    }
                });
        }

        getUnpublishSetId(teacherId, classId);

        const publishSet = () =>{

            console.log("sId: ");
            console.log(sId.value);
            console.log("classId: ");
            console.log(classId);

            $.ajax({
                url: 'http://localhost:8090/sls/publish/publishSet' ,
                type: 'post',
                data: {
                    setId: sId.value,
                    classId: classId,
                },
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                    if(resp.error_message === 'success'){
                        router.push({name: 'T_classSet',params: {classId: classId}});
                    }
                    else{
                        error_message.value = resp.error_message;
                    }
                },
                error(resp){
                    console.log(resp);
                }

            });
        }

        return{
            getUnpublishSetId,
            publishSet,

            error_message,
            classId,
            teacherId,
            unps,
            sId,

        }

     }

 }
 
 </script>
 
 
 
 <style scoped>

 </style>